<template>
  <el-dialog title="文件上传" :visible.sync="dialogVisible" width="500px" top="8vh" :close-on-click-modal="false">
    <div class="wrap">
      <el-upload
        ref="uploadFile"
        action="/admin/sys-file/upLodeFileAdd"
        multiple
        :limit="10"
        :on-exceed="handleExceed"
        :headers="headers"
        :on-success="success"
        :on-error="fail"
        :auto-upload="false"
        :file-list="fileList"
      >
        <el-button size="small" type="primary">点击上传文件</el-button>
      </el-upload>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" :loading="true" v-if="loading">上传中</el-button>
      <el-button type="primary" @click="commit" v-else>提 交</el-button>
    </div>
  </el-dialog>
</template>

<script>
import dbl from '@/utils/dbl'

export default {
  name: 'fileAdd',
  data () {
    return {
      headers: {
        Authorization: dbl.get('token')
      },
      dialogVisible: false,
      fileList: [],
      loading: false
    }
  },
  methods: {
    show () {
      this.dialogVisible = true
      this.fileList = []
    },
    success () {
      this.loading = false
      this.suc('上传成功')
      this.fileList = []
      this.dialogVisible = false
      this.$emit('reset')
    },
    fail () {
      this.loading = false
      this.err('文件上传失败')
    },
    commit () {
      this.loading = true
      this.$refs.uploadFile.submit()
    },
    handleExceed (files, fileList) {
      this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
  }
}
</script>
<style scoped lang="scss">
.execution {
  max-height: 70vh;
  overflow-y: auto;
}

.top-title {
  margin-top: -6px;

  .left {
    font-size: 18px;
  }

  .right {
    padding: 4px;
  }
}

.wrap {
  min-height: 150px;
}
</style>
